<template>
  <div
      class="diy_edit offline_activities_edits page_offline_activities"
      id="offline_activities_edit"
  >
    <el-form
        :model="form"
        ref="ruleFormRef" 
		:rules="rules"
        label-width="auto"
        class="edit_offline_activities_form"
        size="large"
    >
      <el-row class="row_e">
          <el-col v-if="$check_field('ger','event_name','/offline_activities/view') || $check_field('add','event_name','/offline_activities/view') || $check_field('set','event_name','/offline_activities/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="活动名称" prop="event_name">
                      <el-input id="event_name" v-model="form['event_name']" placeholder="请输入活动名称"
                      v-if="(form['offline_activities_id'] && $check_field('set','event_name','/offline_activities/view')) || (!form['offline_activities_id'] && $check_field('add','event_name','/offline_activities/view'))" :disabled="disabledObj['event_name_isDisabled']"></el-input>
            <div v-else-if="$check_field('ger','event_name','/offline_activities/view')">{{form['event_name']}}</div>
                    </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','activity_type','/offline_activities/view') || $check_field('add','activity_type','/offline_activities/view') || $check_field('set','activity_type','/offline_activities/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="活动类型" prop="activity_type">
                      <el-input id="activity_type" v-model="form['activity_type']" placeholder="请输入活动类型"
                      v-if="(form['offline_activities_id'] && $check_field('set','activity_type','/offline_activities/view')) || (!form['offline_activities_id'] && $check_field('add','activity_type','/offline_activities/view'))" :disabled="disabledObj['activity_type_isDisabled']"></el-input>
            <div v-else-if="$check_field('ger','activity_type','/offline_activities/view')">{{form['activity_type']}}</div>
                    </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','activity_description','/offline_activities/view') || $check_field('add','activity_description','/offline_activities/view') || $check_field('set','activity_description','/offline_activities/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="活动描述" prop="activity_description">
                <el-input type="textarea" id="activity_description" v-model="form['activity_description']" placeholder="请输入活动描述"
                      v-if="(form['offline_activities_id'] && $check_field('set','activity_description','/offline_activities/view')) || (!form['offline_activities_id'] && $check_field('add','activity_description','/offline_activities/view'))" :disabled="disabledObj['activity_description_isDisabled']"></el-input>
            <div v-else-if="$check_field('ger','activity_description','/offline_activities/view')">{{form['activity_description']}}</div>
              </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','event_date','/offline_activities/view') || $check_field('add','event_date','/offline_activities/view') || $check_field('set','event_date','/offline_activities/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="活动日期" prop="event_date">
                      <el-input id="event_date" v-model="form['event_date']" placeholder="请输入活动日期"
                      v-if="(form['offline_activities_id'] && $check_field('set','event_date','/offline_activities/view')) || (!form['offline_activities_id'] && $check_field('add','event_date','/offline_activities/view'))" :disabled="disabledObj['event_date_isDisabled']"></el-input>
            <div v-else-if="$check_field('ger','event_date','/offline_activities/view')">{{form['event_date']}}</div>
                    </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','number_of_applicants','/offline_activities/view') || $check_field('add','number_of_applicants','/offline_activities/view') || $check_field('set','number_of_applicants','/offline_activities/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="报名人数" prop="number_of_applicants">
                <el-input-number id="number_of_applicants" v-model.number="form['number_of_applicants']"
                             v-if="(form['offline_activities_id'] && $check_field('set','number_of_applicants','/offline_activities/view')) || (!form['offline_activities_id'] && $check_field('add','number_of_applicants','/offline_activities/view'))" :disabled="disabledObj['number_of_applicants_isDisabled']"></el-input-number>
            <div v-else-if="$check_field('ger','number_of_applicants','/offline_activities/view')">{{form['number_of_applicants']}}</div>
              </el-form-item>
        </el-col>
        </el-row>
      <div v-if="$check_action('/offline_activities/view','set') || $check_action('/offline_activities/view','add') || $check_option('/offline_activities/table','examine')" class="footer">
        <el-button type="primary" @click="onSubmit" size="large">提交</el-button>
        <el-button @click="cancel()" size="large">取消</el-button>
      </div>
      <div v-else class="footer">
        <el-button @click="cancel()" size="large">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
  import {ElMessage} from "element-plus";
  import {ref, onMounted} from "vue";
  import { $post, $get } from "@/api/Api.js";
  import storageHelper from "@/libs/StorageHelper";
  import {useStore} from "vuex";
  import { useRouter, useRoute } from "vue-router";
  import {
          $check_field,
          $fullUrl,
          $banseUrl,
          $check_action,
          $getUrlParams,
          filterSensitiveWords,
          $get_stamp,
          $get_rand,
          $toTime,
          $push
  } from "@/utils/utils.js";

  let router = useRouter();
  let route = useRoute();
  let store = useStore();
  let token = storageHelper.getToken() || null;
  let UserInfo = storageHelper.getUserInfo();
  let user_id = storageHelper.getUserInfo().user_id;
  let user_group = storageHelper.getUserInfo().user_group;
  let offline_activities_id = $getUrlParams().offline_activities_id;
  let url_add = ref("/api/offline_activities/add");
  let url_set = ref("/api/offline_activities/set");
  let field = ref("offline_activities_id")
  let url_get_obj = ref("/api/offline_activities/get_obj");
  let url_upload = ref("/api/offline_activities/upload");
  let ruleFormRef = ref(null);
  
  let rules = ref({
					  });

  let disabledObj = ref({
      "event_name_isDisabled": false,
        "activity_type_isDisabled": false,
        "activity_description_isDisabled": false,
        "event_date_isDisabled": false,
        "number_of_applicants_isDisabled": false,
    });
  let form = ref({
    "event_name":  '', // 活动名称
      "activity_type":  '', // 活动类型
      "activity_description":  '', // 活动描述
      "event_date":  '', // 活动日期
      "number_of_applicants":  0, // 报名人数
      "offline_activities_id": 0, // ID
  });
  
            // 活动类型选项列表
  let list_activity_type = ref([""]);
  
    
    
    
                                                                                                        //提交前验证事件
  let submit_check = () => {
                                          };
  // 点击取消
  let cancel = () => {
    router.go(-1);
  };
  // 点击提交
  let onSubmit = async () => {
    let valid = await ruleFormRef.value.validate();
    if (valid) {
      // 提交表单
      if (offline_activities_id) {
        // 编辑
        delete form.value.update_time;
              $post(url_set.value + "?offline_activities_id=" + offline_activities_id, form.value).then((res) => {
          if (res.result) {
          router.push("/home/offline_activities/table");
          ElMessage.success("提交成功！");
          } else if (res.error) {
            ElMessage.error(res.error.message);
          }
        });

      } else {
        // 新增
              $post(url_add.value, form.value).then((res) => {
          if (res.result) {
              router.push("/home/offline_activities/table");
              ElMessage.success("提交成功！");
          } else if (res.error) {
            ElMessage.error(res.error.message);
          }
        });

      }
    } else {
      ElMessage.error(msg);
    }
  };
  // 查询数组对象某个是否包含某个值,返回对应对象
  let getObj = (arr, val) => {
    let obj = arr.find((item) => item.user_id == val);
    let ret = "";
    if (obj) {
      if (obj.nickname) {
        ret = obj.nickname;
      } else {
        ret = obj.username;
      }
    }
    return ret;
  };
  //获取对象之前
  let get_obj_before = (param) => {
    var formArr = "";
                                  if(form.value && formArr){
      Object.keys(form.value).forEach(key => {
        Object.keys(formArr).forEach(dbKey => {
          if(key === dbKey){
            disabledObj.value[key+'_isDisabled'] = true;
          }
        })
      })
    }
                        localStorage.removeItem('form')
    return param;
  }
  // js判断字段是否是时间戳格式
  let isTimestamp = (value) => {
    return /^\d{10}$/.test(value) || /^\d{13}$/.test(value);
  }
  //获取对象之后
  let get_obj_after = (json, func) => {
                                                                                                                                                      }
  let is_view = () => {
    var bl = user_group == "管理员";
    if (!bl) {
      bl = $check_action('/offline_activities/table', 'add');
      console.log(bl ? "你有表格添加权限视作有添加权限" : "你没有表格添加权限");
    }
    if (!bl) {
      bl = $check_action('/offline_activities/table', 'set');
      console.log(bl ? "你有表格添加权限视作有修改权限" : "你没有表格修改权限");
    }
    if (!bl) {
      bl = $check_action('/offline_activities/view', 'add');
      console.log(bl ? "你有视图添加权限视作有添加权限" : "你没有视图添加权限");
    }
    if (!bl) {
      bl = $check_action('/offline_activities/view', 'set');
      console.log(bl ? "你有视图修改权限视作有修改权限" : "你没有视图修改权限");
    }
    if (!bl) {
      bl = $check_action('/offline_activities/view', 'get');
      console.log(bl ? "你有视图查询权限视作有查询权限" : "你没有视图查询权限");
    }
    console.log(bl ? "具有当前页面的查看权，请注意这不代表你有字段的查看权" : "无权查看当前页，请注意即便有字段查询权限没有页面查询权限也不行");
    return bl;
  }
  // 获取详情
  let get_offline_activities_obj = async () => {
    let list = await $get("/api/offline_activities/get_obj?offline_activities_id=" + offline_activities_id);
    form.value = list.result.obj;
    get_obj_after();
  };
  onMounted(() => {
                        if (offline_activities_id) {
      get_offline_activities_obj();
    }else {
      get_obj_before();
      get_obj_after();
    }

  });
</script>

<style scoped lang="less">
  .diy_edit {
    width: 100%;

    .edit_offline_activities_form {
      max-width: 80%;
      margin: 90px auto;

      .fn {
        width: 100%;
      }
    }

    img {
      width: 100px;
      height: 100px;
    }

    .edit_list_offline_activities_sell {
      width: 80%;
      margin: 90px auto;
    }

    .footer {
      text-align: center;
    }
  }
</style>
  